<template>
  <div ref="scrollWrapper">
    <ul>
      <li v-for="(item, key) in dataArr" :key="key">
        <p>{{item.title}}</p>
        <img :src="item.thumbnail_pic_s" alt="">
      </li>

    </ul>
  </div>
</template>

<script>
/* eslint-disable no-new,indent */

import BScroll from 'better-scroll';


export default {
  name: 'selectArea',
  data() {
    return {
      dataArr: [],
    };
  },
  created() {
    this.$http.get('http://120.79.141.27/data', {
      type: 'top',
    })
      .then(res => {
        this.dataArr = JOSN.parse((res.data.body).result.data);
      })
      .catch(err => {
        console.log(err);
      });
    this.$bus.$on('area-data', (data) => {
    this.dataArr = data;
    });
  },
  mounted() {
     new BScroll(this.$refs.scrollWrapper, {});
  },
  methods() {

  }
};
</script>

<style scoped>
div{
  width: 100vw;
  height: 100vh;
  background:coral;
  overflow: hidden;
}
ul{
  list-style: none;
}
  li{
    /*height: 40px;*/
    background: coral;
    color: #fff;
    /*line-height: 40px;*/
    text-indent: 2em;
    border-top: 1px solid #fff;
  }
</style>
